@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    /* font-family: 'Indie Flower', cursive; */
  }
}

@layer components {
  .page-container {
    @apply container mx-auto p-4 lg:w-2/3;
  }

  .page-wrapper {
    @apply p-4 bg-slate-200 rounded-lg shadow;
  }

  .btn-primary {
    @apply px-4 py-1 text-sm text-zinc-100 bg-zinc-500 rounded-full;
  }
}

/* we will explain what these classes do next! */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.flip-list-enter-active,
.flip-list-leave-active {
  transition: all 0.3s ease-in-out;
}

.flip-list-enter-from,
.flip-list-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}
